<!-- @author pengys5 -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <title>Skywalking UI</title>
    <link href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="/webjars/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
    <link href="/webjars/animate.css/3.5.2/animate.css" rel="stylesheet">
    <link href="\webjars\bootstrap-daterangepicker\2.1.24\css\bootstrap-daterangepicker.css" rel="stylesheet">
    <link href="/public/css/style.css" rel="stylesheet">
    <style>
        .dataTables_wrapper {
            padding-bottom: 0 !important;
        }

        .modal-backdrop {
            position: initial !important;
        }
    </style>
</head>
<body class="white-bg">
<div class="row white-bg" id="queryConditionDiv">
    <div class="row">
        <div class="col-lg-12" style="padding-bottom: 10px">
            <div class="row" style="height: 50px">
                <div class="col-md-1">
                    <div style="padding-left: 30px">
                        <a href="#" class="navbar-brand"
                           style="padding: 0; background: url(/public/img/logo.png) no-repeat center center; background-size: 86px 20px; width: 86px;"></a>
                    </div>
                </div>
                <div class="col-md-2" style="line-height: 50px">
                </div>
                <div class="col-md-3" style="line-height: 50px">
                    <span style="font-weight: 700;" title="GlobalTraceId">GlobalTraceId:&nbsp;&nbsp;</span>
                    <input class="form-control" type="text" id="globalTraceIdInput"
                           style="display: inline-block; width: 200px"/>
                </div>
                <div class="col-md-3" style="line-height: 50px">
                    <span style="font-weight: 700;" title="OperationName">OperationName:&nbsp;&nbsp;</span>
                    <input class="form-control" type="text" id="operationNameInput"
                           style="display: inline-block; width: 200px"/>
                </div>
                <div class="col-md-3" style="line-height: 50px">
                    <button type="button" id="selectBtn" class="btn btn-success" style="display: inline-block;">Select
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12" style="padding-bottom: 10px">
            <div class="row" style="height: 50px">
                <div class="col-md-1">
                </div>
                <div class="col-md-2" style="line-height: 50px">
                </div>
                <div class="col-md-3">
                    <span style="font-weight: 700;" title="StartDateRange">DateRange:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input class="form-control" type="text" id="dateRangeInput" value=""
                           style="display: inline-block; width: 200px"/>
                </div>
                <div class="col-md-3">
                    <span style="font-weight: 700;" title="CostRange">CostRange:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input class="form-control" type="text" id="costMinInput"
                           style="display: inline-block; width: 95px"/>
                    <span style="font-weight: 700;"> - </span>
                    <input class="form-control" type="text" id="costMaxInput"
                           style="display: inline-block; width: 95px"/>
                </div>
                <div class="col-md-3">
                    <span style="font-weight: 700;"
                          title="Sort(Desc)">Sort:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <div class="radio radio-info radio-inline" style="vertical-align: bottom">
                        <input type="radio" id="costSort" value="cost" name="sortColumn" checked="">
                        Cost
                    </div>
                    <div class="radio radio-inline" style="vertical-align: bottom">
                        <input type="radio" id="timeSort" value="time" name="sortColumn">
                        Time
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="wrapper wrapper-content animated fadeInRight" style="padding-top: 0">
    <div id="topTraceListDiv"></div>
    <div id="traceStackDiv"></div>
    <div class="modal inmodal" id="spanModalDiv" tabindex="-1" role="dialog" aria-hidden="true">
    </div>
    <div id="spanModalTempDiv"></div>
</div>

<script src="/webjars/jquery/2.2.4/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/webjars/jsviews/1.0.0-beta.70/jsrender.min.js"></script>
<script src="/webjars/jsviews/1.0.0-beta.70/jsviews.min.js"></script>
<script src="\webjars\momentjs\2.18.1\min\moment.min.js"></script>
<script src="\webjars\bootstrap-daterangepicker\2.1.24\js\bootstrap-daterangepicker.js"></script>
<script src="./trace.js"></script>
</body>
</html>